<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <p>v-bind:href 可以简写为 :href,v-on:click可以简写为@click</p>
    <!--class样式绑定-->
    <p :class="classObj">{{ foo }}</p>
    <!--if-->
    <p v-if="see">fuck wuyj</p>
    <!--a标签、class样式绑定-->
    <a :href="url" :class="[warn1,warn2]">{{url}}</a>
    <!--点击事件、class样式绑定-->
    <button @click="foo = 'fuck yingwj'" :class="[active ? warn1 : warn2]">Change it</button>

    <!--class样式对象绑定-->
    <p :style="messageStyle">Original message: "{{ message }}"</p>
    <!--表达式函数使用-->
    <p>Computed reversed message2: "{{ reversedMessage() }}"</p>
    <!--点击函数使用-->
    <button @click="change">Change </button>

    <!--if else 使用-->
    <div v-if="Math.random()>0.8" >
        random > 0.8
    </div>
    <div v-else-if="Math.random()>0.5">
        random > 0.5
    </div>
    <div v-else="Math.random()<0.5">
        random < 0.5
    </div>
    <!--for遍历list 使用-->
    <table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <td>id</td><td>序号</td><td>姓名</td><td>年龄</td><td>编辑</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in items" :key="item.id" @click="alert(item.id)">
                <td><a @click="alert(item.id)">{{item.id}}</a></td>
                <td>{{index}}</td>
                <td><a :href="item.id">{{item.name | upCase}}</a></td>
                <td><input type="text" v-model="item.age"></td>
                <td><button class="btn" @click="deleteBit(index)">删除 </button></td>
            </tr>
        </tbody>
    </table>

    <!--点击一次 使用-->
    <button @click.once="addBit">addBit once </button>
    <button @click="addBit">addBit </button>
    <!--for遍历对象 使用-->
    <ul id="v-for-object">
        <li v-for="(value,name,index) in wunyj ">
            {{index}}  {{name}}:{{value}}
        </li>
    </ul>
    结果动态使用
    <ul>
        <li v-for="evenNum in evenNums">
            {{evenNum}}
        </li>
    </ul>

    动态表单使用：
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <td>序号</td><td>姓名</td><td>年龄</td><td>编辑</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td><input type="text" v-model="userform.moreUserform.name"></td>
            <td><input type="text" v-model="userform.moreUserform.age"></td>
        </tr>
        <tr v-for="(user,index) in userform.moreUserform">
            <td>{{index+2}}</td>
            <td><input type="text" v-model="user.name"></td>
            <td><input type="text" v-model="user.age"></td>
            <td><button class="btn" @click="deleteUser(index)">删除 </button></td>
        </tr>
        </tbody>
    </table>
    <button @click="addUser">addUser </button>
    <button @click="submitUser">提交user </button>
</div>
</body>

<script>
    var obj = {
        userform: {
            moreUserform: [{
                name: '',
                age: ''
            }]
        },
        foo: 'bar',
        see: false,
        message: "wuyj",
        url: "https://www.baidu.com",
        active:true,
        error:true,
        warn1:'btn',
        warn2:'warn2',
        color:'green',
        fontSize:22,
        messageStyle:{
            color:'red',
            fontSize:'30px'
        },
        items:[
            {"name":"wunyj","age":"28","id":"1"},
            {"name":"wunyj","age":"28","id":"2"},
            {"name":"wunyj","age":"28","id":"3"},
            {"name":"wunyj","age":"28","id":"4"},
            {"name":"wunyj","age":"28","id":"5"},
            {"name":"yingwj","age":"22","id":"6"}
        ],
        wunyj:{
            name:'wun yj',
            age:'28',
            ischu:'0'
        },
        testNum:[1,2,3,4,5,6,7,8]
    }
    var vm = new Vue({
        el: '#app',
        data: obj,
        computed:{
            classObj:function () {
                return {
                    active:this.active,
                    'error':this.error
                }
            },
            evenNums:function () {
                return this.testNum.filter(function (num) {
                    return num % 2===0
                })
            }
        },
        methods:{
            reversedMessage:function () {
                return this.message.split('').reverse().join('')
            },
            change:function () {
                this.foo="fuck wunyj and ywj bloody"
            },
            addBit:function () {
                this.items.push({"name":"girl","age":"28","id":"1"});
               /* alert('add a bit')*/
            },
            deleteBit:function (index) {
                this.items.splice(index, 1)
            },
            addUser:function () {
                this.userform.moreUserform.push({"name":"","age":""});
            },
            submitUser:function () {
                console.log(this.userform.moreUserform)
            },
            deleteUser:function (index) {
                this.userform.moreUserform.splice(index, 1)
            }
        },
        filters:{
            upCase:function (value) {
                return value.charAt(0).toUpperCase()
            }
        }
    })
</script>
</html>